<h2>{{'DISLIKE_DASHBOARD'|translate}}</h2>
<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'FILTER'|translate}}">
</mat-form-field>

<div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>

        <!-- ID Column -->
        <ng-container matColumnDef="count">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'COUNT'|translate}}  </th>
            <td mat-cell *matCellDef="let row" > {{row.count}} </td>
        </ng-container>

        <ng-container matColumnDef="referenceId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'REFERENCEID'|translate}} </th>
            <td mat-cell *matCellDef="let row" > {{row.referenceId}} </td>
        </ng-container>

        <ng-container matColumnDef="referenceType">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'REFERENCETYPE'|translate}}</th>
            <td mat-cell *matCellDef="let row"> {{row.referenceType}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <mat-paginator [showFirstLastButtons]="true" [pageIndex]="pageNumber" [pageSize]="0" [length]="totoal" (page)="pageHandler($event)"></mat-paginator>
</div>